<template>
  <div id="views">
    <p class="logo textCenter">
      <img src="../../common/imgs/wklogob.png" alt="logo">
    </p>
    <div class="form">
      <div>
        <span class="leftIcon">
          <img src="../../common/imgs/usericon.png" alt="" class="inputicon">
        </span>
        <input type="number" class="mobile" placeholder="请输入手机号" v-model="mobile" @input="inputChange()">
        <select name="country" id="country" v-model="country_id" class="selectGreyJt" style="color: #262626">
          <!--onmousedown="javascript:return false;" @click="selCountry"-->
          <option v-for="(item,index) in areaCode_data" v-bind:value="item.id" v-bind:selected="index == 0">
            {{item.name_cn}}
          </option>
        </select>
      </div>
      <div>
         <span class="leftIcon">
          <img src="../../common/imgs/lock.png" alt="" class="inputicon">
        </span>
        <input type="password" placeholder="请输入密码" v-model="password" @input="inputChange()">
      </div>
      <div>
         <span class="leftIcon">
          <img src="../../common/imgs/invertercode_icon.png" alt="" class="inputicon">
        </span>
        <input type="text" placeholder="请输入邀请码(非必填)" v-model="inviter_code" @input="inputChange()" style="width: 100%;" :disabled="hasInviter_code">
      </div>
      <div>
        <span class="leftIcon">
          <img src="../../common/imgs/shield.png" alt="" class="inputicon">
        </span>
        <input type="text" class="code" placeholder="请输入验证码" v-model="code" onkeyup="value=value.replace(/[^\d]+/g,'')">
        <button class="getCode">
          <tongdun-Countdown verfityMobile='true' wt='' hg='' ref="tdEle" beginMsg="获取验证码"
                             refreshMsg="重新获取" timeout="1000" endtime="60" @run="sendCode" @getTdToken="getTdToken"></tongdun-Countdown>
        </button>
      </div>
      <div class="submit">
        <button :class="buttonClass" @click="register" :disabled="disabled">注 册</button>
      </div>
    </div>
    <div class="notmobile">已有账号？
      <router-link :to="{path:'/login' , query: {inviter_uid : inviter_uid , inviter_code : inviter_code }}" class="tologin">去登录>></router-link>
      <p id="inviter_name" v-if="inviterUserName">
        邀请人：<span>{{inviterUserName}}</span>
      </p>
    </div>
  </div>
</template>
<script>
  import { postRegister, getAreaCode, getMbCode } from "../../http/api";
  // import '../../common/style/iosselect.style';

  export default {
    name: 'register',
    components: {
      tongdunCountdown: resolve => { require(['../../components/tongdunCountdown'], resolve) },//同盾倒计时功能插件
    },
    data() {
      return {
        introduce: '注册',
        mobile: '',
        password: '',
        code: '',
        areaCode_data: '',
        yzm_token: '',
        blackBox: '',
        isSendCode : false,//是否发送手机验证码
        inviter_uid : null,//邀请uid
        inviter_code : null, //邀请码
        disabled: false,//注册按钮防止重复点击
        area_code: '',/*手机号区域*/
        country_id : '',//选择的国家id
        buttonClass: '' ,//注册按钮 是否置灰
        inviterUserName : null,//邀请人姓名
        hasInviter_code : false,//是否禁用邀请码输入
      }
    },
    mounted() {
      let thiz = this;
      let params = {};
      let inviter_uid = this.getUrlKey("inviter_uid");//判断是否有邀请inviter_uid
      this.$store.commit('inviter_uid',inviter_uid);
      if( inviter_uid ){
        thiz.inviter_uid = inviter_uid;
        params.inviter_uid = inviter_uid;
      }
      let inviter_code = null;
      // let storeInvitercode = this.$store.state.inviter_code;
      // if(storeInvitercode){
      //   inviter_code = storeInvitercode;
      // }
      if(!inviter_code){
        inviter_code = this.getUrlKey("inviter_code");//判断是否有邀请inviter_code
        if( inviter_code ){
          params.inviter_code = inviter_code;
        }
      }
      getAreaCode(params).then(function (res) {
        if (res.code == 200) {
          thiz.areaCode_data = res.data.country;
          thiz.country_id = thiz.areaCode_data[0].id;
          thiz.inviterUserName = res.data.subname;//邀请人的名字
          if( res.data.inviter_code ){
            thiz.inviter_code = res.data.inviter_code;
            thiz.hasInviter_code = true;
          }else{
            thiz.hasInviter_code = false;
          }
        }
      });
    },
    computed:{
      listenChange () {
        return { mobile:this.mobile , password:this.password  , code:this.code  , isSendCode :this.isSendCode  };
      }
    },
    watch:{
      'listenChange' ( val ){
        this.inputChange();
      },
      'country_id'( val ){
        let thiz = this, data = this.areaCode_data;
        this.for( data , function ( item , index ) {
          if(val == item.id){
            thiz.area_code = data[index].area_code;
          }
        })
      }
    },
    methods: {
      inputChange() {
        this.mobile = this.mobile.replace('.', '');
        this.buttonClass = this.mobile && this.password && this.code && this.isSendCode && this.yzm_token ? 'allow' : 'notallow';
        this.$refs.tdEle.getMobile(this.mobile);
      },
      selCountry() {
        // let thiz = this;
        // let iosSelect = require('../../common/js/iosselect').iosSelect;
        // let iosSelArr = [];
        // thiz.for(thiz.areaCode_data, function (item) {
        //   item.value = item.name_cn;
        //   item.country_id = item.id;
        //   iosSelArr.push(item);
        // });
        // iosSelect(1, [iosSelArr], {
        //   container: '#app',
        //   title: '选择国籍',
        //   oneLevelId: thiz.country_id,//默认选中的
        //   itemHeight: 40,
        //   itemShowCount: 7,
        //   callback: function (res) {
        //     thiz.area_code = res.area_code;
        //     thiz.country_id = res.country_id;
        //   }
        // });
      },
      sendCode() {
        //发送验证码
        let thiz = this , toast = require('../../common/js/toast').toast;
        if(!thiz.mobile){
          toast('请输入手机号');
        }else if(thiz.$refs.tdEle.interval != null){
          toast('请勿重复点击^_^');
        }else{
          let param = {
            blackBox: thiz.blackBox , yzm_token: thiz.yzm_token, mobile: thiz.mobile, area_code: thiz.area_code,country_id:thiz.country_id,type : 'register'
          };
          getMbCode(param).then(function (res) {
            if( res.code == 200){
              thiz.$refs.tdEle.begin();
              toast('验证码已发送至您的手机');
              thiz.isSendCode = true;
            }else{
              thiz.$refs.tdEle.resetTd();
            }
          })
        }
      },
      getTdToken(){
        //获取同盾token
        let thiz = this;
        thiz.$refs.tdEle.getTdToken(function (res) {
          thiz.yzm_token = res.yzm_token;
          thiz.blackBox = res.blackBox;
          if( thiz.mobile ){
            thiz.sendCode()
          }
        })
      },
      getCode() {
        /*点击获取验证码按钮*/
        // let isInterval = this.$refs.tdEle.interval;
        // let toast = require('../../common/js/toast').toast;
        // thiz.$refs.tdEle.begin(function (res) {
        //   thiz.yzm_token = res.yzm_token;
        //   thiz.blackBox = res.blackBox;
        //   //开始倒计时
        //   let codePrams = {
        //     blackBox: thiz.blackBox, yzm_token: thiz.yzm_token, mobile: thiz.mobile, area_code: thiz.area_code,country_id:thiz.country_id,type : 'register'
        //   };
        //   thiz.sendCode(codePrams)
        // });
      },
      register() {
        let thiz = this;
        /*提交*/
        if (this.buttonClass === 'allow' && !thiz.disabled) {
          thiz.disabled = true;
          thiz.timeout(res => {
            thiz.disabled = false;
          }, 1000);
          let params = {
            telphone: thiz.mobile,
            area_code: thiz.area_code,
            password: thiz.password,
            smscode: thiz.code,
            country_id: thiz.country_id
          };
          if( thiz.inviter_code ){
            params.inviter_code = thiz.inviter_code;
          }
          if( thiz.inviter_uid ){
            params.invite_uid = thiz.inviter_uid;
          }
          postRegister(params).then(res => {
            if (res.code == 200) {
              require('../../common/js/toast').toast('注册成功');
              thiz.$router.replace({path: '/login', query: {mobile: thiz.mobile, area_code: thiz.area_code, country_id: thiz.country_id}});
            }
          });
        }
      }
    },
    destroyed() {
      require('../../common/js/iosselect').delSelect();
    }
  }
</script>
<style lang="less" type="text/less" scoped>
  #views{min-height: 100%;background: #fff;}
  .logo{padding:1.2rem 0;background: #fff;}
  .logo>img{width: 1.74rem;text-align: center;}
  .form{
    padding: 1.2rem 0.8rem;padding-top: 0;
    >div{
      overflow: hidden;background: #f7f7f7;border-radius: 1rem;height: 1.2rem;padding: 0 0.45rem;position: relative;margin-top: .3rem;text-align: left;
      >.leftIcon{
        display: inline-block;width: 0.27rem;height: 0.33rem;position: absolute;z-index: 1;left: 0.45rem;top:50%;margin-top: -0.165rem;
        .inputicon{
          width: 100%;max-height: 100%;
        }
      }

      input{width: 60%;height: 100%;padding-left:0.46rem;background: none;font-size: 0.32rem;}
      input[type=password]{width: 100%}
      .mobile{width: calc( 100% - 1.8rem );}
      .code{width: 50%;}
      .getCode{
        width:2.6rem;height: 100%;max-width: 50%;text-align: center;padding:0 .45rem;color: #ffd203;float: right;background: none;position: absolute;right: 0;top:0;font-size: .28rem;overflow: hidden;
        >span{line-height: 1.2rem;text-align: center;}
      }
    }
    >div:first-child{margin-top: 0;}
    .submit{
      margin-top: .5rem;overflow: hidden;padding:0;
      button{width: 100%;height: 100%;background: none;font-size: .36rem;}
      .allow,.allow[disabled]{background: #ffd203;color:#262626}
    }
    #country{
      width: 1.48rem;position: absolute;right: 0.52rem;font-size: .28rem;bottom:0;margin-top: -0.05rem;height: 100%;
      padding:0 0.15rem;padding-right: 0.35rem;padding-left: 0;line-height: 200%;
    }
  }
  .notmobile{font-size: .28rem;color: #AFB2B8;text-align: center;padding: 0.68rem 0.4rem;padding-top: 0;}
  .tologin{color:#ffd203}
  #inviter_name{
    padding-bottom: 0.3rem;text-align: center;color: #AFB2B8;padding-top: 0.8rem;font-size: 0.24rem;
  }
</style>
